<template>
  <ui-page class="container">
    <div v-for="chart in chartTypes" :key="chart.ref" class="chart-item">
      <div class="chart-item-title">{{ chart.name }}</div>
      <div class="chart-item-chart">
        <v-chart :chart="chart.ref" :data="getChartData(chart)"/>
      </div>
    </div>
  </ui-page>
</template>

<script>
import Vue from 'vue';
import ChartTooltip from './ChartTooltip.vue';
import ChartData from '@/assets/data/chart.json';

const Tooltip = Vue.extend(ChartTooltip);

export default {
  name: "ComponentsChart",
  data() {
    return {
      chartTypes: [
        {name: '基础折线图', ref: 'line-base', data: {}},
        {name: '渐变面积折线图', ref: 'line-area', data: {}},
        {name: '堆叠渐变面积折线图', ref: 'line-stacked-area', data: {}},
        {name: '特殊tooltip折线图', ref: 'line-area-tooltip', data: {}},
        {name: 'L0001', ref: 'L0001', data: {}},
        {name: 'L0002', ref: 'L0002', data: {}},
        {name: 'L0003', ref: 'L0003', data: {}},
        {name: 'L0004', ref: 'L0004', data: {}},
        {name: 'L0005', ref: 'L0005', data: {}},
        {name: 'L0006', ref: 'L0006', data: {}},
        {name: 'L0007', ref: 'L0007', data: {}},
        {name: 'L0008', ref: 'L0008', data: {}},
        {name: 'L0009', ref: 'L0009', data: {}},
        {name: 'L0010', ref: 'L0010', data: {}},
        {name: 'L0011', ref: 'L0011', data: {}},
        {name: 'L0012', ref: 'L0012', data: {}},
        {name: 'L0013', ref: 'L0013', data: {}},
        {name: 'L0014', ref: 'L0014', data: {}},
        {name: 'L0015', ref: 'L0015', data: {}},
        {name: 'L0016', ref: 'L0016', data: {}},
        {name: 'L0017', ref: 'L0017', data: {}},
      ],
      tooltip: null
    }
  },
  mounted() {
    if (this.tooltip) {
      this.tooltip.$destroy();
      this.tooltip.$el.parentNode.removeChild(this.tooltip.$el);
    }
  },
  beforeDestroy() {
    if (this.tooltip) {
      this.tooltip.$destroy();
      this.tooltip.$el.parentNode.removeChild(this.tooltip.$el);
    }
  },
  methods: {
    getChartData(chart) {
      if(chart.ref === 'line-area-tooltip') {
        return this.getLineAreaTooltip(chart);
      }else if(chart.ref === 'L0001'){
        return {data: ChartData[chart.ref], title:'行驶里程统计(km)'};
      } else if(chart.ref === 'L0011'){
        return {data: ChartData[chart.ref], text:['亿','人']};
      }else if(chart.ref === 'L0012'){
        return {data: ChartData[chart.ref], title:'氨气硫化氢实时监测(ppm)'};
      }else if(chart.ref === 'L0013'){
        return {data: ChartData[chart.ref],title:'收运进程统计（次）'};
      } else {
        return {data: ChartData[chart.ref], text: ChartData[chart.ref][0].text || null};
      }
    },
    getLineAreaTooltip(chart) {
      const tooltipFormatter = this.tooltipFormatter;
      return {data: ChartData[chart.ref], tooltipFormatter, text: ChartData[chart.ref][0].text || null};
    },
    tooltipFormatter([lastYear, thisYear]) {
      let compareValue = 'flat';
      const list = [];
      if (![undefined,null,''].includes(lastYear.value)) {
        let value = lastYear.value ? lastYear.value.toFixed(2) : 0.00;
        list.push({unit: 'mg/L', value: value, color1: lastYear.color, color2: lastYear.borderColor})
      }
      if (![undefined,null,''].includes(thisYear?.value)) {
        let value = thisYear.value ? thisYear.value.toFixed(2) : 0.00;
        list.push({unit: 'mg/L', value: value, color1: thisYear.color, color2: thisYear.borderColor})
      }
      const tooltip = new Tooltip({
        el: document.createElement('div'),
        propsData: {
          width: '150px',
          label: lastYear.name,
          list: list,
          compare: true,
          compareValue,
        },
      });
      this.tooltip = tooltip;
      return tooltip.$el;
    },
  }
}
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  .chart-item {
    width: 360px;
    height: 250px;
    margin: 20px;
    background: #244258;
    border-radius: 10px;
    display: flex;
    flex-direction: column;

    .chart-item-title {
      text-align: center;
      line-height: 30px;
      color: #ffffff;
    }

    .chart-item-chart {
      flex: 1;
    }
  }
}
</style>
